<template>
  <div class="body-container layout-padding">
    <el-form label-width="120px" style="margin-bottom: 10px">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item label="角色名称">
            <el-input v-model="state.sd.roleName" placeholder="角色名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button size="default" type="primary" class="ml10" @click="searchRole">
            <el-icon><ele-Search /></el-icon>查询
          </el-button>
          <el-button size="default" type="primary" class="ml10" @click="addRole">
            <el-icon><ele-CirclePlus /></el-icon>添加
          </el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="state.roleObj.list" border style="width: 100%">
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="small" type="primary" @click="editRole(scope.row.id)">修改</el-button>
          <el-button size="small" type="danger"  @click="deleteRole(scope.row.id)">删除</el-button>
          <el-button size="small" type="primary" @click="roleSetUser(scope.row.id)">用户设置</el-button>
          <el-button size="small" type="primary" @click="roleSetPermission(scope.row.id)">权限设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="mt15" background layout="total, prev, pager, next"
                   @current-change="loadRole" @size-change="loadRole" :total="state.roleObj.total"
                   v-model:current-page="state.sd.pageNum" v-model:page-size="state.sd.pageSize">
    </el-pagination>

    <el-dialog :title="state.popupTitle" v-model="state.entityDetailVisible" :close-on-click-modal="false" width="769px">
      <RoleDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></RoleDetail>
    </el-dialog>
    <el-dialog :title="state.popupTitle" v-model="state.roleUserVisible" :close-on-click-modal="false" width="880px">
      <RoleUser v-if="state.roleUserVisible" v-model="state.roleUserVisible" :roleId="state.popupEntityId"></RoleUser>
    </el-dialog>
    <el-dialog :title="state.popupTitle" v-model="state.rolePermissionVisible" :close-on-click-modal="false" width="880px">
      <RolePermission v-if="state.rolePermissionVisible" v-model="state.rolePermissionVisible" :roleId="state.popupEntityId"></RolePermission>
    </el-dialog>
  </div>
</template>

<script setup name="roleIndex">
import request from '/@/utils/request';
import { ElMessage } from 'element-plus';
import mittBus from '/@/utils/mitt';
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent, defineProps} from "vue";
// 引入组件
const RoleDetail = defineAsyncComponent(() => import('/@/views/sys/role/roleDetail.vue'));
const RoleUser = defineAsyncComponent(() => import('/@/views/sys/role/roleUser.vue'));
const RolePermission = defineAsyncComponent(() => import('/@/views/sys/role/rolePermission.vue'));

const state = reactive({
  sd: {
    roleName : '',
    pageNum: 1,
    pageSize: 10
  },
  roleObj: {},

  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,

  roleUserVisible : false,
  rolePermissionVisible : false,
})

const searchRole = ()=>{
  state.sd.pageNum = 1;
  loadRole();
}
const loadRole = ()=>{
  request({url: '/sys/role/pagerole', data: state.sd}).then(res => {
    const { data } = res
    state.roleObj = data
  })
}
const addRole = ()=>{
  state.popupEntityId = 0;
  state.popupTitle= "新增角色"
  state.entityDetailVisible= true
}
const editRole = (id)=>{
  state.popupEntityId = id;
  state.popupTitle= "修改角色"
  state.entityDetailVisible= true
}
const roleSetUser = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "角色用户"
  state.roleUserVisible= true
}
const roleSetPermission = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "权限设置"
  state.rolePermissionVisible= true
}
const deleteRole = (id)=>{
  request({
    url: '/sys/role/deleterole',
    data: {id : id}
  }).then(res => {
    if(res.code === '200') {
      ElMessage.success(res.msg)
      loadRole();
    }
  })
}
onMounted(()=>{
  loadRole();
  mittBus.on("roleadd", ()=>{
    state.sd.pageNum = 1;
    loadRole();
  })
  mittBus.on("roleedit", ()=>{
    loadRole();
  })
})
onUnmounted(()=>{
  mittBus.off("roleadd", ()=>{})
  mittBus.off("roleedit",()=>{})
})
</script>
<style scoped>
</style>
